/* eslint-disable react-hooks/exhaustive-deps */
import React, { useMemo, useState } from "react";
import { Selector, Space } from "antd-mobile";
import styles from "../css/train.module.css";
import { BillOutline, ClockCircleOutline } from "antd-mobile-icons";
import { useSearchParams } from "react-router-dom";
function Footer() {
  const [sp, setSp] = useSearchParams();
  const [options] = useState([
    {
      label: <ClockCircleOutline />,
      description: "出发 早 → 晚",
      value: "isDesc",
    },
    {
      label: (
        <svg className="icon" aria-hidden="true" style={{ fontSize: "20px" }}>
          <use xlinkHref="#icon-gaotie"></use>
        </svg>
      ),
      description: "只看高铁/动车",
      value: "isSpeed",
    },
    {
      label: <BillOutline />,
      description: "只看有票",
      value: "isSeat",
    },
  ]);
  const arr = ["isDesc", "isSpeed", "isSeat"];
  const defaultValue = useMemo(() => {
    const temp = [];
    arr.forEach((key) => {
      if (sp.get(key) === "true") {
        temp.push(key);
      }
    });
    if (sp.get("isDesc") === "true") {
      options[0].description = "耗时 短 → 长";
    } else {
      options[0].description = "出发 早 → 晚";
    }
    return temp;
  }, [arr, sp, options]);
  const change = (values) => {
    console.log(values);
    if (values.includes("isDesc")) {
      options[0].description = "耗时 短 → 长";
    } else {
      options[0].description = "出发 早 → 晚";
    }
    const obj = {
      isDesc: false,
      isSpeed: false,
      isSeat: false,
    };
    values.forEach((key) => {
      obj[key] = true;
    });
    setSp({ ...Object.fromEntries(sp), ...obj });
  };
  return (
    <div className={styles.trainfooter}>
      <Selector
        columns={3}
        onChange={change}
        options={options}
        defaultValue={defaultValue}
        multiple
      />
    </div>
  );
}

export default Footer;
